<template>
  <div id="wisdomBind">
    <c-title :hide="false" :text="this.$route.params.option == 'phone' ? '绑定手机' : '实名认证'"> </c-title>
    <div class="phoneBindBox" v-if="option == 'phone'">
      <van-field v-model="mobile" center clearable label="手机号码" placeholder="请输入手机号码"></van-field>
      <van-field v-model="smsMobile" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="primary" @click="checkCodeMethod" v-if="!btnTag">发送验证码</van-button>
          <div v-else class="countTxt">
            <span style="font-size: 0.6875rem; color: #666;">(已发送)</span>
            {{ btnText }}
          </div>
        </template>
      </van-field>
    </div>
    <div class="phoneBindBox" v-if="option == 'auth'">
      <van-field v-model="userName" center clearable label="姓名" placeholder="请输入姓名"></van-field>
      <van-field v-model="code" center clearable label="身份证" placeholder="请输入身份证"></van-field>
    </div>
    <div class="btn" @click="confrimBtn">提交</div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      option: "",
      //手机号码
      mobile: "",
      // 手机验证码
      smsMobile: "",
      // 图形验证码
      imgcode: "",
      // 是否开启图形验证码
      imgcodeShow: false,
      btnText: "获取验证码",
      timer: null,
      btnTag: false,
      // 姓名
      userName: "",
      code: ""
    };
  },
  activated() {
    console.log(this.$route.params.option);
    this.option = this.$route.params.option;
    if (this.option == "phone") {
      this.fun.setWXTitle("绑定手机");
    } else {
      this.fun.setWXTitle("实名认证");
    }
  },
  methods: {
    confrimBtn() {
      let url = "";
      let json = {};
      if (this.option == "phone") {
        url = "plugin.eplus-pay.frontend.mobile.smsConfirm";
        json = { mobile: this.mobile, code: this.smsMobile };
      } else {
        url = "plugin.eplus-pay.frontend.name.nameAuth";
        json = { name: this.userName, identity_no: this.code };
      }
      $http
        .post(url, json, " ")
        .then(res => {
          let resdata = res.data;
          if (res.result == 1) {
            this.$dialog.alert({ message: res.msg }).then(() => {
              if (this.$route.params.to == "pay") {
                this.$router.go(-1)
              } else {
                this.$router.replace(this.fun.getUrl("wisdomBindTask"));
              }
            });
          } else {
            this.$dialog.alert({ message: res.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 验证发送短信验证码
    checkCodeMethod() {
      this.firstNext();
    },
    firstNext() {
      $http
        .post("plugin.eplus-pay.frontend.mobile.smsCode", { mobile: this.mobile }, " ")
        .then(res => {
          let resdata = res.data;
          if (res.result == 1) {
            this.sendCodeAnimation();
          } else {
            this.$dialog.alert({ message: res.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 倒计时
    sendCodeAnimation() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        Toast.success("验证码已发送");
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.btnText = this.count + "s";
            this.btnTag = true;
          } else {
            this.btnTag = false;
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.phoneBindBox {
  margin: 0.625rem 1rem 0 1rem;
}

.btn {
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  background: #f51d1d;
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 1rem 0 1rem;
}
</style>